<template>
<ul>
<!--  v-for="元素 in 数组"-->
  <li v-for="uname in arr">{{uname}}</li>
</ul>
  <ol>
<!--  v-for="元素 in 数字n"  遍历数组 从1到数字n，步长为1，数字n可以自定义-->
    <li v-for="item in 11">{{item}}</li>
  </ol>
  <table border="1px">
    <caption>商品列表</caption>
    <tr>
      <th>序号</th>
      <th>商品标题</th>
      <th>商品价格</th>
      <th>商品库存</th>
      <th>操作</th>
    </tr>
<!--    - v-for="(元素,下标) in 数组"  第2个参数是当前遍历到的元素下标，从0开始-->
    <tr v-for="(p,index) in pdArr">
      <td>{{index+1}}</td>
      <td>{{p.title}}</td>
      <td>{{p.price}}</td>
      <td>{{p.num}}</td>
      <td><button @click="del(index)">删除</button></td>
    </tr>
  </table>
</template>

<script setup>
import { ref } from 'vue';
const arr = ref(["张三",  "李四", "王五","赵六", "钱七"])
const pdArr =ref([
    {title:'小米手机',price:5000,num:800},
    {title:'华为手机',price:6000,num:900},
    {title:'苹果手机',price:7000,num:100},
    {title:'三星手机',price:8000,num:200},
    {title:'三星手机',price:8000,num:200}
]);
const del = (index)=>{
  if(confirm('确认删除么')){
    pdArr.value.splice(index,1)
  }
}
</script>

<style scoped>

</style>